<!--
 * @Author: your name
 * @Date: 2021-04-22 13:52:52
 * @LastEditTime: 2021-04-22 15:21:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-todolist\src\components\Edit.vue
-->
<template>
  <div class="container">
    <div class="form-group">
      <label for="">内容</label>
      <input type="text" class="form-control" v-model="newItem.text">
      <div class="float-right mt-4">
        <button class="btn btn-success mr-4" @click="submit()">保存</button>
        <button class="btn btn-secondary mr-4" @click="cancel()">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue'
import store from '@/store'
import router from '@/router'

export default defineComponent({
  name: 'Edit',
  setup () {
    const item = store.state.item
    const newItem = { ...item }
    const submit = () => {
      store.commit('update', newItem)
      router.go(-1)
    }
    const cancel = () => {
      router.go(-1)
    }
    return reactive({
      newItem,
      submit,
      cancel
    })
  }
})
</script>
<style lang="scss" scoped>
</style>
